<template>
  <div class="content">
    <div class="content-container">
      <van-sidebar class="content-menu" v-model="tableValue">
        <van-sidebar-item
          v-for="(item, index) in goodMenu"
          class="content-menu-menuitem"
          :key="index"
          :title="item.name"
          @click="menuNav(index)"
        />
      </van-sidebar>
      <div class="content-good" id="goodListId">
        <div
          class="content-good-box"
          v-for="(item, index) in goodMenu"
          :key="index"
          :id="'scroll' + index"
        >
          <div class="content-good-box-head">
            <div class="content-good-box-headname">{{ item.name }}</div>
            <div class="content-goood-box-headdescription">
              {{ item.description }}
            </div>
          </div>
          <div
            class="content-good-box-item"
            v-for="(jitem, jindex) in item.goods"
            :key="jindex"
          >
            <div class="content-good-box-itemleft">
              <img :src="jitem.image_path" alt="" />
            </div>
            <div class="content-good-box-itemright">
              <div class="irt">
                <div class="irt-name">{{ jitem.name }}</div>

                <p class="irt-description">{{ jitem.description }}</p>
                <p class="irt-rate" v-if="jitem.month_sales">
                  <span>月销:{{ jitem.month_sales }}</span>
                  <span> 好评率：{{ jitem.rating }}%</span>
                </p>
              </div>
              <div class="irb">
                <div class="irb-price">
                  <div>￥{{ jitem.price }}</div>
                </div>
                <div class="item-cart-num">
                  <CartStepper :choosenItem="jitem"></CartStepper>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部弹出 -->
    <van-sticky position="bottom" offset-bottom="4vw"
      ><div class="cart">
        <div class="cart-content">
          <van-icon
            class="cart-content-icon"
            size="5vh"
            name="shopping-cart"
            @click="showCart"
          />
          <div class="cart-content-num" @click="showCart">
            <!-- 未选购商品 -->
            <span v-if="cartStore.totalPrice == 0">还未选购商品</span>
            <!-- 已选购商品 -->
            <span v-else>￥{{ cartStore.totalPrice }}</span>
          </div>
          <van-button class="cart-content-button" @click="sumbitCart()"
            >提交订单</van-button
          >
        </div>
      </div>
    </van-sticky>

    <van-popup
      v-model:show="cartShow"
      round
      position="bottom"
      :style="{ height: '40%' }"
    >
      <Cart @unshow="unShow"></Cart>
    </van-popup>
  </div>
</template>
<script setup lang="ts">
import { ref, Ref, onMounted } from "vue";
import { menu, good, cartItem } from "@/utils/interface";
import { usecartStore } from "@/store/modules/module.js";
import CartStepper from "@/components/stepper/Stepper.vue";
import Cart from "@/components/cart/Cart.vue";
import { useRouter } from "vue-router";

const cartStore = usecartStore();
const router = useRouter();
const tableValue = ref(0);
const goodMenu: Ref<menu[]> = ref([
  {
    id: "1",
    name: "人气热卖",
    description: "超人气爆款，低至4折起",
    // image后面要做成cdn或者做成base64
    goods: [
      {
        id: "1-1",
        image_path: "..\\src\\assets\\4.png",
        name: "人气三件套",
        description: "香辣鸡腿堡+薯条+可乐",
        month_sales: 585,
        rating: 98,
        discount: 5,
        price: 24,
      },
      {
        id: "1-2",
        image_path: "..\\src\\assets\\4.png",
        name: "蜜汁全鸡两件套",
        description: "蜜汁全鸡+可乐",
        month_sales: 685,
        rating: 98,
        discount: 5,
        price: 56,
      },
      {
        id: "1-3",
        image_path: "..\\src\\assets\\4.png",
        name: "嫩牛五方三件套",
        description: "嫩牛五方+薯条+可乐",
        month_sales: 585,
        rating: 96,
        discount: 5,
        price: 24,
      },
    ],
  },
  {
    id: "2",
    name: "单人餐",
    goods: [
      {
        id: "1-1",
        image_path: "..\\src\\assets\\4.png",
        name: "人气三件套人气三件套人气三件套",
        description: "香辣鸡腿堡+薯条+可乐",
        month_sales: 585,
        rating: 98,
        discount: 5,
        price: 24,
      },
      {
        id: "1-2",
        image_path: "..\\src\\assets\\4.png",
        name: "蜜汁全鸡两件套",
        description: "蜜汁全鸡+可乐",
        month_sales: 685,
        rating: 98,
        discount: 5,
        price: 56,
      },
    ],
  },
  {
    id: "3",
    name: "多人餐",
    goods: [
      {
        id: "3-1",
        image_path: "..\\src\\assets\\4.png",
        name: "欢乐全家桶",
        description: "香辣鸡腿堡×2+香辣鸡翅+可乐",
        month_sales: 585,
        rating: 98,
        discount: 5,
        price: 45,
      },
      {
        id: "3-2",
        image_path: "..\\src\\assets\\4.png",
        name: "至尊全家桶",
        description: "蜜汁全鸡+香辣鸡腿堡",
        month_sales: 685,
        rating: 98,
        discount: 5,
        price: 88,
      },
      {
        id: "3-3",
        image_path: "..\\src\\assets\\4.png",
        name: "超级至尊全家桶",
        description: "蜜汁全鸡+香辣鸡腿堡+麦乐鸡+香辣鸡翅+可乐",
        month_sales: 685,
        rating: 98,
        discount: 5,
        price: 128,
      },
    ],
  },
  {
    id: "4",
    name: "全鸡",
    goods: [
      {
        id: "4-1",
        image_path: "..\\src\\assets\\4.png",
        name: "全鸡",
        description: "全鸡一只",
        month_sales: 585,
        rating: 98,
        discount: 5,
        price: 45,
      },
      {
        id: "4-2",
        image_path: "..\\src\\assets\\4.png",
        name: "奥尔良全鸡",
        description: "蜜汁全鸡",
        month_sales: 685,
        rating: 98,
        discount: 5,
        price: 48,
      },
      {
        id: "4-3",
        image_path: "..\\src\\assets\\4.png",
        name: "全鸡可乐套餐",
        description: "全鸡+可乐",
        month_sales: 685,
        rating: 98,
        discount: 5,
        price: 58,
      },
      {
        id: "4-4",
        image_path: "..\\src\\assets\\4.png",
        name: "奥尔良全鸡可乐套餐",
        description: "奥尔良全鸡+可乐",
        month_sales: 685,
        rating: 98,
        discount: 5,
        price: 62,
      },
    ],
  },
  { id: "5", name: "汉堡卷" },
  { id: "6", name: "饮品" },
  { id: "7", name: "甜品" },
  { id: "8", name: "冰淇淋" },
  { id: "9", name: "儿童餐" },
  { id: "10", name: "玩具" },
]);
// 监听食品列表的滚动，滚动到一定位置要更新左部的侧边导航栏
onMounted(() => {
  window.addEventListener("scroll", scollNav, true);
});

// 监听购物车弹出层弹出
const cartShow = ref(false);
const showCart = () => {
  cartShow.value = true;
};

// 自动翻页到当前类别的位置
// 左侧点击联动右侧
const menuNav = (index: number) => {
  // console.log(index);
  tableValue.value = index;
  let navPage = <HTMLImageElement>document.querySelector("#scroll" + index);
  let parent = <HTMLImageElement>document.querySelector("#goodListId");
  document.querySelector("#goodListId")!.scrollTop =
    navPage?.offsetTop - parent?.offsetTop;
};

// 右侧菜单联动左侧
// 滑动右侧 左侧自动切换导航标签
const scollNav = () => {
  let parent = <HTMLImageElement>document.querySelector("#goodListId");
  let start = (<HTMLImageElement>document.querySelector("#scroll" + 0))
    .offsetTop;
  for (let i = 0; i < goodMenu.value.length; i++) {
    if (
      (<HTMLImageElement>document.querySelector("#scroll" + i)).offsetTop -
        start <
      parent.scrollTop
    ) {
      tableValue.value = i;
    }
  }
};

const unShow = () => {
  cartShow.value = false;
};

const sumbitCart = () => {
  router.push({ path: "/order", name: "Order" });
};
</script>
<style lang="less" scoped>
* {
  &::-webkit-scrollbar {
    display: none;
  }
  overflow-x: hidden;
  overflow-y: auto;
}
.content {
  .van-dialog__message {
    font-size: 10vw !important;
  }
}
.content-container {
  display: flex;
  height: 80vh;
  background-color: #f7f7f7;
  .content-menu {
    width: 20vw;
    align-items: center;
    height: 80vh;
    .content-menu-menuitem {
      padding: 0;
      font-size: 1.5vh;
      line-height: 7vh;
      text-align: center;
      height: 7vh;
    }
  }
  .content-good {
    overflow: auto;
    .content-good-box {
      .content-good-box-head {
        padding: 2vw 1vw;
        color: #666;
        align-items: center;
        display: flex;
        .content-good-box-headname {
          font-size: 4vw;
          font-weight: bold;
        }
        .content-goood-box-headdescription {
          font-size: 1vw;
          margin-left: 1.5vw;
        }
      }
      .content-good-box-item {
        display: flex;
        background-color: #ffffff;
        border-radius: 2vw;
        padding: 2vw 1vw;
        margin-bottom: 3vw;
        height: 10vh;
        .content-good-box-itemleft {
          width: 32vw;
          height: 10vh;
          overflow-y: hidden;
          // overflow: hidden;
          // position: absolute;
          img {
            width: 32vw;
            border-radius: 3vw;
            // display: block;
          }
        }
        .content-good-box-itemright {
          // padding-left: 35vw;
          padding-left: 3vw;
          width: 40vw;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .irt {
            .irt-name {
              font-size: 4vw;
              font-weight: bold;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              height: 2.5vh;
            }
            .irt-description {
              font-size: 2vw;
              color: rgb(227, 147, 27);
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
          .irb {
            display: flex;
            height: 3vh;
            width: 40vw;
            align-items: center;
            // overflow-y: hidden;
            // .irb-discount {
            //   height: 2.5vh;
            // }
            .irb-price {
              color: #f50808;
              text-align: center;
              font-size: 4vw;
              height: 2.5vh;
              width: 15vw;
              // overflow-y: hidden;
            }
            .item-cart-num {
              display: flex;
              align-items: center;
              padding-left: 15vw;
              width: 20vw;
            }
          }
        }
      }
    }
  }
}
.cart {
  // overflow-y: hidden;
  .cart-content {
    display: grid;
    grid-template-columns: 20% 50% 30%;
    grid-template-areas: "icon num button";
    align-items: center;
    width: 100vw;
    height: 6vh;
    background-color: #d81919;
    border-radius: 5vw;
    overflow-y: hidden;
    .cart-content-icon {
      left: 3vw;
      grid-area: icon;
      justify-self: start;
      height: 5vh;
      width: 10vw;
      color: #fcb309;
    }
    .cart-content-num {
      text-align: left;
      grid-area: num;
      font-size: 5vw;
      color: #f7f7f7;
    }
    .cart-content-button {
      grid-area: button;
      justify-self: end;
      background-color: #fcb309;
      font-weight: 500;
      border-radius: 5vw;
      width: 30vw;
      height: 6vh;
      font-size: 4vw;
    }
  }
  van-sticky {
    z-index: 9999;
  }
}
</style>
